<template>
  <my-layout :gsdata="items">
    <my-header slot="header" :isShow="false" :title="title"/>
    <div class="list-warp">
      <div class="c-list" v-for="(i,index) in items" :key="index" @click="goDetailPage">
        <div class="item-img">
          <img
            src="http://xlylf-hlj.oss-cn-hangzhou.aliyuncs.com/com/null/usr/90ff4db713544939b7e906c647fb2926.1530549437808.jpg"
            alt
          >
        </div>
        <div class="item-msg">
          <p class="msg-title">武汉梵客家居科技有限公司</p>
          <p class="adress">
            <span>所在区域: 武汉江汉区</span>
            <span>
              所有方案:
              <b>404套</b>
            </span>
          </p>
        </div>
      </div>
    </div>
  </my-layout>
</template>
<script>
export default {
  data() {
    return {
      title: "装修公司",
      items: [1, 2, 2, 3, 4, 3, 3, 3, 4]
    };
  },
  methods: {
    goDetailPage() {
      this.$router.push({
        path: "/detail",
        query: { id: 1 }
      });
    }
  },
  mounted() {
    setTimeout(() => {
      this.items.push(1, 2, 3, 4);
    }, 2000);
  }
};
</script>

<style lang="scss">
.list-warp {
  padding-left: 12px;
  .c-list {
    display: flex;
    .item-img {
      width: 60px;
      height: 60px;
      overflow: hidden;
      margin-right: 8px;
      margin-top: 12px;
      > img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
      }
    }
    .item-msg {
      flex: 1;
      overflow: hidden;
      padding: 12px 0 8px;
      position: relative;
      border-bottom: 1px solid #e6e6e6;
      .msg-title {
        padding-top: 8px;
        font-size: 16px;
        color: #333;
        margin-bottom: 12px;
      }
      .adress {
        font-size: 16px;
        color: #7f7f7f;
        .span:first-child {
          width: 170px;
          font-size: 14px;
          color: #333;
        }
        span + span {
          margin-left: 18px;
          font-size: 12px;
          b {
            color: #fe5979;
          }
        }
      }
    }
  }
}
</style>
